<script lang="ts">
export default {
    name: 'RoleList'
}
</script>

<script setup lang="ts">
import useRole from '@/composables/system/role/useRole';
import useRoleTable from '@/composables/system/role/useRoleTable';
import AddAndEidt from './AddAndEidt.vue';
import AssignMenu from './AssignMenu.vue';
import SysPagination from '@/components/SysPagination/index.vue';

// 表格列表
const { roleTable, listParam, getRoleList, searchBtn, resetBtn, sizeChange, currentChange } = useRoleTable()

const { addBtn, editBtn, delBtn, save, addEditRef, assignMenuRef, assignBtn } = useRole(getRoleList)

</script>
<template>
    <el-main>
        <!-- 搜索栏 -->
        <el-form :inline="true" :model="listParam" class="search">
            <el-form-item label="角色名称">
                <el-input v-model="listParam.role_name" placeholder="请输入角色名称"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="listParam.status" placeholder="状态">
                    <el-option label="正常" value="1" />
                    <el-option label="停用" value="2" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" v-permission="['system:role:query']" @click="searchBtn">搜索
                </el-button>
                <el-button type="default" icon="Refresh" @click="resetBtn">重置</el-button>
                <el-button type="success" v-permission="['system:role:add']" icon="Plus" @click="addBtn()">新增
                </el-button>
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table :data="roleTable.list" border stripe>
            <el-table-column prop="id" label="ID" width="100"></el-table-column>
            <el-table-column prop="role_name" label="角色名称"></el-table-column>
            <el-table-column prop="status" width="80" label="状态">
                <template #default="scope">
                    <el-tag v-if="scope.row.status == '1'">正常</el-tag>
                    <el-tag v-if="scope.row.status == '2'" type="danger">停用</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="300">
                <template #default="scope">
                    <el-button size="small" type="success" v-permission="['system:role:assign']" icon="Setting"
                        @click="assignBtn(scope.row.role_name, scope.row.id)">设置权限</el-button>
                    <el-button size="small" type="primary" v-permission="['system:role:edit']" icon="Edit"
                        @click="editBtn(scope.row)">
                        编辑</el-button>
                    <el-button size="small" type="danger" v-permission="['system:role:delete']" icon="Delete"
                        @click="delBtn(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <SysPagination :listParam="listParam" @sizeChange="sizeChange" @currentChange="currentChange"></SysPagination>
    </el-main>
    <!-- 新增或编辑弹框 -->
    <AddAndEidt ref="addEditRef" @save="save"></AddAndEidt>
    <!-- 分配权限 -->
    <AssignMenu ref="assignMenuRef"></AssignMenu>
</template>
<style lang="scss" scoped>
</style>